<template>
  <div>
    <router-view></router-view>
    <van-tabbar v-show="$route.meta.show" v-model="active" class="tab" active-color="#ee0a24" inactive-color="#000">
      <van-tabbar-item icon="wap-home-o" to="/home">首页</van-tabbar-item>
      <van-tabbar-item icon="coupon-o" to="/category">分类</van-tabbar-item>
      <van-tabbar-item icon="balance-list-o" to="buy">值得买</van-tabbar-item>
      <van-tabbar-item icon="cart-o" :to="$store.state.user.token ? '/shopCart' : '/login'" v-if="$route.path == '/shopCart'" :badge="totalSelct">购物车</van-tabbar-item>
      <van-tabbar-item icon="cart-o" :to="$store.state.user.token ? '/shopCart' : '/login'" v-else>购物车</van-tabbar-item>
      <van-tabbar-item icon="user-circle-o" :to="$store.state.user.token ? '/center' : '/login'">个人</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import Vue from "vue";
import { Button, Tabbar, TabbarItem } from "vant";
import Home from "@/pages/home/index.vue";
import { mapGetters } from "vuex";
Vue.use(Tabbar);
Vue.use(TabbarItem);
export default {
  name: "App",
  components: {
    [Button.name]: Button,
    Home,
  },
  data() {
    return {};
  },
  computed: {
    ...mapGetters("shopcart", ["good"]),
    totalSelct() {
      return this.good.reduce((one, two) => {
        return one + two.skuNum;
      }, 0);
    },
    active: {
      get() {
        switch (this.$route.path) {
          case "/home":
            return 0;
          case "/category":
            return 1;
          case "/buy":
            return 2;
          case "/shopCart":
            return 3;
          case "/center":
            return 4;
          default:
            break;
        }
      },
      set() {},
    },
  },
};
</script>

<style lang="less" scoped>
.tab {
  height: 50px;
  width: 100%;
}
</style>
